<template>
  <div class="login-container">
    <el-row class="login-wrapper" justify="center" align="middle">
      <el-col :xs="24" :sm="12" :md="10" :lg="8">
        <el-card class="login-card" shadow="always">
          <!-- 标题部分 -->
          <div class="login-header">
            <h1 class="title">Welcome Back</h1>
            <p class="subtitle">Please login to continue</p>
          </div>

          <!-- 登录表单 -->
          <el-form :model="loginForm" ref="loginFormRef" @keyup.enter="handleLogin">
            <!-- 用户名输入 -->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User" size="large" />
            </el-form-item>

            <!-- 密码输入 -->
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
                size="large" show-password />
            </el-form-item>

            <!-- 记住我 & 忘记密码 -->
            <div class="login-options">
              <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
              <el-link type="primary">忘记密码?</el-link>
            </div>

            <!-- 登录按钮 -->
            <el-button type="primary" size="large" :loading="loading" @click="handleLogin" class="login-btn">
              立即登录
            </el-button>

            <!-- 注册引导 -->
            <div class="register-guide">
              <span class="tip">没有账号？</span>
              <el-link type="primary" :underline="false" class="register-btn" @click="handleRegister">
                立即注册
              </el-link>
            </div>
            <button @click="goAdmin()">管理员</button>
            <button @click="goSeller()">商家</button>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue';
import { useRouter } from "vue-router";
import ElMsg from "@/utils/globalElMsg";
const router = useRouter();
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { useUserStore } from "@/stores/user.store" 
import { changeLayout, LayoutType } from '@/utils/changeLayout'
const userStore = useUserStore()

const loginFormRef = ref<FormInstance>();
const loading = ref(false);
const rememberMe = ref(false);

const loginForm = reactive({
  username: "",
  password: "",
});

const goAdmin = () => {
  changeLayout(LayoutType.ADMIN)
  router.push("/admin");
}

const goSeller = () => {
  changeLayout(LayoutType.SELLER)
  router.push("/seller");
}

const handleLogin = async () => {
  try {
    loading.value = true;
    await loginFormRef.value?.validate();
    // 这里添加实际登录逻辑
    console.log(loginForm);
    const userType = "commonUser";
    if (userType === "commonUser") {
      userStore.getUserToken()
      console.log(userStore.token);
      ElMsg.successMsg("登陆成功");
      router.push("/user/home");
    }
    // if (userType === "seller") {
    //   ElMsg.successMsg("登陆成功");
    //   changeLayout(LayoutType.SELLER)
    //   router.push("/seller");
    // }
    // if (userType === "admin") {
    //   ElMsg.successMsg("登陆成功");
    //   changeLayout(LayoutType.ADMIN)
    //   router.push("/admin");
    // }
  } finally {
    loading.value = false;
  }
};

const handleRegister = () => {
  // 跳转到注册页面或打开注册弹窗
  router.push("/user/register");
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  // background-image: url("");
  // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: url('@/assets/images/loginbg6.jpg') no-repeat center center;
    /* 让背景图片覆盖整个元素 */
    background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-wrapper {
    width: 100%;
    padding: 20px;
  }

  .login-card {
    border-radius: 15px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    .login-header {
      text-align: center;
      margin-bottom: 30px;

      .title {
        color: #2d3748;
        font-size: 2rem;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #718096;
        font-size: 0.9rem;
      }
    }

    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
    }

    .login-btn {
      width: 100%;
      margin-top: 10px;
      letter-spacing: 2px;
      font-weight: bold;
    }

    .register-guide {
      text-align: center;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;

      .tip {
        color: #718096;
        margin-right: 8px;
      }

      .register-btn {
        font-weight: 500;
        font-size: 0.95rem;
        transition: color 0.3s ease;

        &:hover {
          color: #4a9eff;
        }
      }
    }
  }
}
</style>
